<script setup lang="ts">
import { ref } from 'vue';
import type { Ref } from 'vue';


const checked: Ref<boolean> = ref(false)
const mobilephone: Ref<string> = ref('')
const vertifycode: Ref<string> = ref('')
const password: Ref<string> = ref('')
import { sendCode } from '@/api/login'
function getCode() {
    //获取验证码sendCode
    sendCode({}).then(res => {
        console.log('sendcode', res.data);
        if (res.data.code == vertifycode.value) {
            //验证码正确
            //可以修改密码

        }
    })
}
import { useUserStore } from '@/stores/user';
import { showToast } from 'vant';
import { useRouter } from 'vue-router';
const router=useRouter()
const user = useUserStore()
function certainClick() {
    //提交信息
    sendCode({}).then(res => {
        console.log('sendcode', res.data);
        if (res.data.code == vertifycode.value) {
            //验证码正确
            //可以修改密码
            user.changeUserState({
                token: '',
                userid: '',
                isLogin: false,
                userpsw: password.value,
                usertel: mobilephone.value,
                username: ''
            })
            router.push('/login/userLogin')
        }else{
            showToast('验证码有误！')
        }
       
    })
}
</script>
<template>
    <div class="content">
        <div class="header">
            <van-nav-bar left-text="返回" left-arrow />
        </div>
        <div class="nr">
            <p class="login-appname">忘记密码</p>
            <span class="start">获取验证码已更改密码</span>
            <!-- 可以使用 CellGroup 作为容器 -->
            <van-cell-group inset>
                <van-field v-model="mobilephone" type="number" placeholder="请输入手机号"
                    style="background-color: #f7f7f7;width: 80vw;" />
                <div class="code">
                    <van-field class="vertifycode" v-model="vertifycode" type="number" placeholder="输入验证码"
                        style="background-color: #f7f7f7;width: 60vw;margin-top: 4vw;margin-bottom: 4vw;">
                    </van-field>
                    <van-button class="getCode" @click="getCode">获取验证码</van-button>
                </div>

                <van-field v-model="password" placeholder="新密码（6-18位字母数字组合）"
                    style="background-color: #f7f7f7;width: 80vw;;margin-bottom: 6vw;" />
            </van-cell-group>

            <van-button color="#265AE8" class="phoneLogin" @click="certainClick">确定</van-button>




        </div>

    </div>
</template>
<style lang="scss" scoped>
//::v-deep
.custom-input .van-field__control {
    background-color: #e73f3f;
}

.nr {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    margin-top: 14vw;

    .login-appname {
        font-size: 0.2rem;
    }

    .start {
        margin-top: 2vw;
        margin-bottom: 14vw;
        color: #ccc;
    }

    .code {
        display: flex;
        justify-content: center;
        align-items: center;
        width: 80vw;
    }



    .getCode {
        width: 27vw;
        font-size: 0.12rem;
        background-color: #F7F7F7;
        border: none;
        color: #265AE8;
    }

    .phoneLogin {
        width: 80vw;
        display: flex;
        justify-content: center;
        align-items: center;
        box-sizing: border-box;
        line-height: 44px;
    }


}
</style>